<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Heatmap with Leaflet</title>
    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="echarts" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
    var map, url = host + "/iserver/services/map-china400/rest/maps/China";
    map = L.map('map', {
        center: [30.24, 120.15],
        maxZoom: 18,
        zoom: 14
    });
    L.supermap.tiledMapLayer(url).addTo(map);

    $.get('../data/hangzhou-tracks.json', function (data) {
        var points = [].concat.apply([], data.map(function (track) {
            return track.map(function (seg) {
                return seg.coord.concat([1]);
            });
        }));
        option = {

            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'leaflet',
                data: points,
                pointSize: 5,
                blurSize: 6
            }]
        };
        L.supermap.echartsLayer(option).addTo(map);
    });
</script>
</body>
</html>